<template>
  <div class="page">
    <div class="tab_line">
      <ul>
        <li @click="changeCurrent" :class="{current:current == 0}" href="#"><span>未使用</span></li>
        <li @click="changeCurrent1" :class="{current:current == 1}" href="#"><span>已使用</span></li>
        <li @click="changeCurrent2" :class="{current:current == 2}" href="#"><span>已失效</span></li>
      </ul>
    </div>
    <div v-if="current == 0">
      <template v-if="untapped.length">
      <div class="coupon weui-flex" v-for="item in untapped" :key="item.id">
        <img class="coupon_bg" src="../../../static/images/archbg.png" mode="widthFix">
        <div class="coupon_value" @click="detail(item)">
          <div class="coupon_number" v-if="item.ticketDef.ticketType==1">{{item.ticketDef.discount}}</div>
          <div class="coupon_number" v-if="item.ticketDef.ticketType==0">{{item.ticketDef.description}}</div>
          <div class="spec" v-if="item.ticketDef.ticketType==1">折</div>
          <div class="spec" v-if="item.ticketDef.ticketType==0">元</div>
        </div>
        <div class="weui-flex__item coupon_info">
          <div class="coupon_title">{{item.ticketDef.ticketName}}</div>
          <div class="weui-flex">
            <div class="weui-flex__item coupon_condition" v-if="item.ticketDef.leastCost">满{{item.ticketDef.leastCost*0.01}}元使用</div>
            <div class="weui-flex__item coupon_condition" v-else></div>
            <a class="usebtn" @click="userPon(item)">去使用</a>
          </div>
          <div class="coupon_data">{{item.begin}} 至 {{item.end}}</div>
        </div>
      </div>
      </template>
       <div class="coupon weui-flex" v-if="!untapped.length">
           <div class="outData"  >
          <span>暂无数据</span>
           </div>
       </div>
    </div>
    <div v-if="current == 1">
       <template v-if="untapped.length">
      <div class="coupon weui-flex" v-for="item in untapped" :key="item.id">
        <img class="coupon_bg" src="../../../static/images/archbg.png" mode="widthFix">
        <div class="coupon_value"  @click="detail(item)">
         <div class="coupon_number" v-if="item.ticketDef.ticketType==1">{{item.ticketDef.discount}}</div>
         <div class="coupon_number" v-if="item.ticketDef.ticketType==0">{{item.ticketDef.description}}</div>
         <div class="spec" v-if="item.ticketDef.ticketType==1">折</div>
         <div class="spec" v-if="item.ticketDef.ticketType==0">元</div>
        </div>
        <div class="weui-flex__item coupon_info">
          <div class="coupon_title">{{item.ticketDef.ticketName}}</div>
          <div class="weui-flex">
            <div class="weui-flex__item coupon_condition" v-if="item.ticketDef.leastCost">满{{item.ticketDef.leastCost*0.01}}元使用</div>
            <div class="weui-flex__item coupon_condition" v-else></div>
            <a class="usebtn usebtn_used" href="#">已使用</a>
          </div>
          <div class="coupon_data">{{item.begin}} 至 {{item.end}}</div>
        </div>
      </div>
       </template>
       <div class="coupon weui-flex" v-if="!untapped.length">
           <div class="outData"  >
          <span>暂无数据</span>
           </div>
       </div>
    </div>
    <div v-if="current == 2">
       <template v-if="untapped.length">
      <div class="coupon weui-flex" v-for="item in untapped" :key="item.id">
        <img class="coupon_bg" src="../../../static/images/archbg.png" mode="widthFix">
        <div class="coupon_value"  @click="detail(item)">
        <div class="coupon_number" v-if="item.ticketDef.ticketType==1">{{item.ticketDef.discount}}</div>
        <div class="coupon_number" v-if="item.ticketDef.ticketType==0">{{item.ticketDef.description}}</div>
        <div class="spec" v-if="item.ticketDef.ticketType==1">折</div>
        <div class="spec" v-if="item.ticketDef.ticketType==0">元</div>
        </div>
        <div class="weui-flex__item coupon_info">
          <div class="coupon_title">{{item.ticketDef.ticketName}}</div>
          <div class="weui-flex">
            <div class="weui-flex__item coupon_condition" v-if="item.ticketDef.leastCost">满{{item.ticketDef.leastCost*0.01}}元使用</div>
            <div class="weui-flex__item coupon_condition" v-else></div>
            <a class="usebtn usebtn_used" href="#">已失效</a>
          </div>
          <div class="coupon_data">{{item.begin}} 至 {{item.end}}</div>
        </div>
      </div>
       </template>
        <div class="coupon weui-flex" v-if="!untapped.length">
           <div class="outData"  >
          <span>暂无数据</span>
           </div>
       </div>
    </div>
  </div>
</template>

<script>
import * as appId from "@/utils/util"
import {getTIme} from "@/utils/util"
// import { resolve } from 'dns';
// import Promise from "es6-promise"
// import { Promise } from 'q';
// import { resolve } from 'dns';

const Promise = require('es6-promise').Promise
export default {
  data () {
    return {
      current: 0,
      untapped:[],//为使用
      haveMade:[],//已使用
      expired:[],//已失效
       phone:"",
      pageNo:1,
      pageSize:10,

    }
  },
  mounted(){

    wx.setNavigationBarTitle({
      title: "优惠券列表"
    })
    this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
    if(this.userInfo){
       this.phone=this.userInfo.mobileNo;
      this.changeCurrent(this.current);
    }else{
      wx.showToast({
        title: '请登录',
        icon: 'none',
        duration: 2000
      })
    }


  },
   onPullDownRefresh(){
     console.log('down')
      if(this.result.length){
     this.pageNo++;
    }
    console.log(this.current)
     this.conmentMethods(this.current)

  },
  methods: {
    userPon(item){//去使用
    let that=this;
       this.$http.request({
        method: "post",
        url: "/v1.0/appletOperat/appletOperatReCou",
        body: {
         	"userId":this.userInfo.baseUserId,
          "phone":that.phone,
          "productId":item.ticketDef.id,
          "appid":appId.appId

        },
        }).then((data)=>{
           if(data.code==0){
              wx.showToast({
              title:"领取成功",
              icon: 'success',
              duration: 2000
            })
            let url="/pages/product/main";
             wx.navigateTo({ url })
          }else{

              wx.showToast({
              title: `${data.message}`,
              icon: 'none',
              duration: 2000
            })
          }
        })
    },
    //未使用
    getTIme,
    changeCurrent(){
        this.current=0;
        this.pageNo=1;
        this.untapped=[];
        this.conmentMethods(this.current).then((data)=>{

        })

    },
     //已使用
    changeCurrent1(){
        this.current=1;
        this.pageNo=1;
          this.untapped=[];
         this.conmentMethods(this.current)
    },
     //已失效
    changeCurrent2(){
        this.current=2;
        this.pageNo=1;
          this.untapped=[];
         this.conmentMethods(this.current)
    },
    conmentMethods(status){
        let that=this;
        return new Promise((resolve,reject)=>{
            this.$http.request({
                    method:"post",
                    url:"/1.0/appletLogin/myCouponList",
                    body:{
                      "phone":that.phone,
                      "appid":appId.appId,
                      "pageNo":that.pageNo,
                      "pageSize":that.pageSize,
                      "status":status?status:'0',
            }
          }).then((data)=>{

            if(data.code==0){
              that.result=data.result;
               if (that.pageNo > 1) {
              that.untapped.push(...data.result)
              }else{
                that.untapped=data.result;
              }
               if(that.untapped.length){
                 that.untapped.forEach((a,i)=>{
                   a.begin=that.getTIme(a.start_time)
                   a.end=that.getTIme(a.expriy_time)
                 })
               }
               if(!data.result.length){
               wx.stopPullDownRefresh();

            }
             resolve(data.result)
            }else{
             that.untapped=[]
               wx.showToast({
              title: `${data.message}`,
              icon: 'none',
              duration: 2000
            })
            }
          })
          //     .catch((err)=>{
          //    wx.showToast({
          //     title: "请求失败",
          //     icon: 'none',
          //     duration: 2000
          //   })
          // })
        })


    },
    detail (item) {
      console.log(item)
      let url = 'pages/index/main'
      wx.navigateTo({ url:'/pages/coupondetail/main?data='+JSON.stringify(item) })
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.outData{
width:100%;text-align:center;font-size:0.8em;
}
.tab_line ul{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.tab_line ul li{
  height: 2.4em;
  line-height: 2.4em;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
  color: #666;
  font-size: 0.8em;
  background: #fff;
}
.tab_line ul li span{
  display: inline-block;
  height: 2.4em;
}
.tab_line ul li.current span{
  border-bottom: 1px #FF787E solid;
  color: #FF787E;
}
.coupon{
  position: relative;
  margin: 0.8em 0.8em 0em 0.8em;
}
.coupon_bg{
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}
.coupon_value{
  width: 33.3333%;
  text-align: center;
  position: relative;
}
.coupon_value .coupon_number{
  position: absolute;
  width: 100%;
  height: 2em;
  line-height: 2em;
  top: 50%;
  margin-top: -1em;
  left: 0px;
  color: #fff;
  font-size: 1em;
}
.coupon_value .spec{
  position: absolute;
  top: 0px;
  right: 0px;
  background: #FF787E;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  line-height: 1.4em;
  font-size: 0.8em;
  text-align: center;
  border: 1px #fff solid;
  color: #fff;
}
.coupon_info{
  position: relative;
  z-index: 99;
  padding: 0.6em;
}
.coupon_info .coupon_title{
  color: #333;
  font-size: 0.9em;
  margin-top: 0.2em;
  margin-bottom: 0.3em;
}
.coupon_info .coupon_condition{
  font-size: 0.8em;
  color: #FF787E;
}
.coupon_info .usebtn{
  width: 4.6em;
  height: 1.6em;
  color: #FF787E;
  border: 1px #FF787E solid;
  display: block;
  border-radius: 0.8em;
  line-height: 1.6em;
  text-align: center;
  font-size: 0.8em;
}
.coupon_info .usebtn_used{
  border: 1px #aaa solid;
  color: #999;
}
.coupon_data{
  font-size: 0.7em;
  color: #999;
  margin-top: 0.3em;
}
</style>
